<template>
	<view class="content">
		<view class="list2 fw-bt">
			<view class="shop-demo" v-for="(item,index) of shopList" :key="index">
				<!--图片 -->
				<view class="shop-img f-w" @click="goShopDetail(item.product_id)">
					<image :src="item.image" mode=""></image>
				</view>
				<!-- 名字 -->
				<view class="shop-name hide-line2 bold f28">{{item.store_name}}</view>
				<!-- 店名 -->
				<view class="shop-name2 hide-line2">
					{{item.merchant.mer_name}}
				</view>
				<view class="shop-price fw-bt c3">
					<!-- 价格 -->
					<view class="">
						<view class="f-w">
							<view class="f24">￥</view>
							<view class="bold f28 f-w">{{item.price}}
								<view class="huangou" v-if="item.old_price">换购价</view>
							</view>
						</view>
						<view class="price2" v-if="item.old_price">￥{{item.old_price}}</view>
					</view>
					<!-- 购买组件 废弃增加多规格了-->
					<!-- <view class="cart-btn f-w">
						<view class="cart1-jian f-w" @click="cartDel(item)" style="justify-content: flex-end;">
							<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png" mode=""></image>
						</view>
						<input type="number" v-model="item.carNum">
						<view class="cart1-add f-w" @click="cartAdd(item)" style="justify-content: flex-start;">
							<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png" mode=""></image>
						</view>
					</view> -->
					<view class="cart-btn f-w">
						<rules :product_id="item.product_id">
							<view class="cart1-add f-w" style="justify-content: flex-start;">
								<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
							</view>
						</rules>
					</view>
				</view>
				<!-- 商品图标 -->
				<view class="shop-tag">
					<image :src="item.shop_img" mode=""></image>
				</view>
				<!-- 精选好物 -->
				<view class="shop-good" v-if="item.good">
					<image :src="item.good" mode=""></image>
				</view>
				<!-- 最近浏览过 -->
				<view class="shop-history c3 f22" v-if="item.desc">{{item.desc}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cache from '@/util/cache.js'
	import rules from '@/components/rules.vue'
	import {
		getCartApi,
		addCartApi,
		cartChangeApi,
		cartDeleteApi
	} from '@/api/cart.js'
	export default {
		name: "goods",
		components: {
			rules
		},
		data() {
			return {
				shopList: [], //商品列表
				market: {},
				cartProductKeyNmae: 'cartProductKeyNmae:',
				cartProductCartIdKey: "cartProductCartIdKey:",
				cartData: []
			};
		},
		created() {
			let This = this
			// this.type   1为推荐菜市场下商品，2为满件减  ，3，凑单红包，3搭配商品,4优惠换购
			// this.market = JSON.parse(Cache.get('market'))
			this.market = Cache.get('market',true)
			if(Cache.get('@@@@@@@@@@@@@@@@@@@@@@@@@')){
				this.shopList = JSON.parse(Cache.get('@@@@@@@@@@@@@@@@@@@@@@@@@'))
			}else{
				this.shopList = []
			}
			console.log(this.shopList,'===================')
			
			getCartApi().then(res => {
				res.data.list.forEach(merCart => {
					merCart.list.forEach(cart => {
						// This.cartData[`cartD${cart.product_id}`] = cart.cart_id
						// This.$set(This.cartData,`cartD${cart.product_id}`, cart.cart_id)
						Cache.set(`${This.cartProductCartIdKey}${cart.product_id}`, cart.cart_id)
						Cache.set(`${This.cartProductKeyNmae}${cart.product_id}`, cart.cart_num)
					})
				})
			}).catch(err => {

			})
			this.shopList.forEach((product, index) => {
				this.$set(product, 'carNum', this.getCartNum(product.product_id))
				if (Cache.get(`${This.cartProductCartIdKey}${product.product_id}`)) {
					this.$set(product, 'cart_id', Cache.get(`${This.cartProductCartIdKey}${product.product_id}`))
				} else {
					this.$set(product, 'cart_id', 0)
				}
			})
			console.log(this.shopList, '------------------------')
		},
		methods: {
			getCartNum(productId) {
				let num = 0
				num = Cache.get(`${this.cartProductKeyNmae}${productId}`)
				if (!num) {
					num = 0
				}
				return num
			},

			// 去商品详情
			goShopDetail(id) {
				uni.navigateTo({
					url: '/pages/client/shop/shop-detail/shop-detail?id=' + id
				})
			},
			// 购物车减
			cartDel(item) {
				let num = item.carNum - 1
				if (num <= 0) {
					item.carNum = 0
				} else {
					item.carNum = num
				}
				console.log(item)
				if (item.cart_id == 0) {
					console.log('未加入购物车')
					return;
				}

				Cache.set(`${this.cartProductKeyNmae}${item.product_id}`, item.carNum)
				if (item.carNum <= 0) {
					cartDeleteApi({
						cart_id: [item.cart_id]
					}).then(res => {
						console.log(res)
					}).catch(err => {
						console.log(err)
					})
				} else {
					cartChangeApi(item.cart_id, {
						cart_num: item.carNum
					}).then(res => {
						console.log(res)
					}).catch(err => {
						item.carNum += 1
					})
				}
			},
			// 购物车加
			cartAdd(item) {
				let This = this
				console.log(item)
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: item.attrValue ?
						item.attrValue[0].unique : item.productAttrValue.attrValue[0].unique, //都是单规格
					product_type: item.product_type,
					product_id: item.product_id
				}
				addCartApi(data).then(res => {
					item.carNum += 1
					item.cart_id = res.data.cart_id
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.list2 {
			flex-wrap: wrap;
			overflow: hidden;

			.shop-btn {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.c1 {
				color: #109C7A;
				font-weight: bold;
			}

			.c2 {
				color: #FCA223;
			}

			.c3 {
				color: #F45E14;
			}

			.huangou {
				margin-left: 5rpx;
				color: #F45E14;
				font-size: 22rpx;
				font-weight: 400;
			}

			&>view {
				position: relative;
				margin-bottom: 20rpx;
				width: 344rpx;
				padding: 55rpx 22rpx 40rpx;
				min-height: 568rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;

				.shop-img {
					width: 284rpx;
					height: 284rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-name {
					margin: 20rpx 0 10rpx;
					height: 72rpx;
				}

				.shop-name2 {
					height: 64rpx;
					font-size: 24rpx;
					color: #666;
				}

				.shop-price {
					// margin-top: 28rpx;
					margin: -20rpx auto 0;
					min-width: 320rpx;
					height: 45rpx;

					.price2 {
						font-size: 22rpx;
						color: #999;
						text-decoration: line-through;
					}

					.cart-btn {
						// margin-right: 20rpx;

						input {
							margin: 0 5rpx;
							width: 40rpx;
							font-weight: 600;
							text-align: center;
							color: #333;
							font-size: 28rpx;
						}

						.cart1-jian,
						.cart1-add {
							width: 80rpx;
							height: 80rpx;
							display: flex;
							align-items: center;
							// justify-content: center;
							position: relative;
							z-index: 99;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}

				.shop-tag {
					position: absolute;
					top: 16rpx;
					left: 16rpx;
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-good {
					position: absolute;
					top: 0;
					right: 16rpx;
					width: 53rpx;
					height: 71rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-history {
					position: absolute;
					top: 12rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 180rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}
</style>
